<template>
  <div>
    <!-- 主体内容：用户名密码两个输入框 -->
    <!-- 
      插槽的分类：
        1. 默认插槽：没有起名字，默认名字叫defalut
        2. 具名插槽：可以自定义名字，通过name自定义名字，可以实现定向分发
           <slot name="content"></slot>

           <template #content>

           </template>

      作用域插槽：插槽可以携带参数的语法，插槽上其实可以携带一定的参数，给组件使用者提供便利
      关于携带的参数，使用组件时，想用就用，不用也可以
        1. 给插槽，添加属性的方式传值
           <slot title="abc" desc="123"></slot>

        2. 所有的被添加的属性，会被统一收集到一个对象中
           { title: 'abc', desc: '123' }

        3. 所有的组件使用者，使用插槽时，就可以通过 = 接收已经提供好的参数
           <template v-slot:header="obj">

      之所以叫作用域插槽，插槽的传值，只能在当前template范围内使用
    -->
    <hm-dialog>
      <template #new='newcontent'>
        <h1>{{newcontent.title}}</h1> 
         </template>
      <template #old='oldcontent'> 
        <h2 v-for="item in oldcontent.arr" :key="item">{{item}}</h2>
        </template>
      <!-- template 不会影响任何结构和布局，只是一个包裹内容的容器 -->
      <!-- <template v-slot:header="obj">
        <h3>登录弹框 - {{ obj.title }}</h3>
      </template>
  
      <template v-slot:default>
        用户: <input type="text"> <br>
        密码: <input type="password"> <br>
      </template>

      <template v-slot:footer="{ yes, no }">
        <button>{{ yes }}</button>
        <button>{{ no }}</button>
      </template> -->
    </hm-dialog>

    <!-- const obj = { name: 'zs', age: 18 } 
         const { name, age } = obj
    -->

    <!-- 主体内容： -->
    <!-- <hm-dialog> -->
      <!-- <template #header>
        <h3>注册弹框</h3>
      </template>

      <template #default>
        姓名: <input type="text"> <br>
        是否单身: <input type="checkbox"> <br>
      </template>

      <template #footer>
        <button>确认</button>
        <button>取消</button>
      </template>
    </hm-dialog> -->
  </div>
</template>

<script>
import HmDialog from './components/hm-dialog.vue'
export default {
  components: {
    HmDialog
  }
}
</script>

<style>

</style>